<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //offset 偏移量 

        //element.offsetParent      返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
        //element.offsetTop         返回元素相对带有定位父元素上方的偏移    返回数值不带单位
        //element.offsetLeft        返回元素相对带有定位父元素左边框的偏移  返回数值不带单位
        //element.offsetWidth       返回自身包括padding、border、width的宽度 返回数值不带单位
        //element.offsetHeight      返回自身包括padding、border、width的高度 返回数值不带单位

        //offset 与 style 区别
        //offset可以得到任意样式表中的样式值,style只能得到行内样式表中的样式值
        //offset系列获得的数值是没有单位的,style.width获得的是带有单位的字符串
        //offsetWidth包含padding+border+width,style.width获得不包含padding和border的值
        //offsetWidth等属性是只读属性，只能获取不能赋值,style.width是可读写属性可以获取也可以赋值
        //想要获取元素大小位置，用offset更合适,想要给元素更改值，则需要用style改变 

        //元素可视区client系列
        //client翻译就是客户端，用client系列的相关属性来获取元素可视区的相关信息。
        //通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
        //client系列属性
        //element.clientTop
        //返回元素上边框的大小
        //element.clientLeft
        //返回元素左边框的大小
        //element.clientWidth
        //返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
        //element.clientHeight
        //返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

        //元素scroll系列属性
        //scrol翻译 滚动的
        //使用scroll系列的相关属性可以得到该元素的实际大小(包括超出部分)、滚动距离等。
        // scroll系列属性
        //element.scrollTop
        //返回被卷去的上侧距离，返回数值不带单位
        //element.scrollLeft
        //返回被卷去的左侧距离，返回数值不带单位
        //element.scrollWidth
        //返回自身实际的宽度，不含边框，返回数值不带单位
        //element.scrollHeight
        //返回自身实际的高度，不含边框，返回数值不带单位

        //注意
        //元素被卷去头部是 element.scrollHeight
        //页面被卷去头部是 window.pageYOffset

        //mouseover 鼠标事件 鼠标经过自身以及自身里面的子盒子都会触发 会冒泡
        //mouseenter 鼠标事件 鼠标只有在经过自身时才会触发,经过自身的子盒子不会触发 不会冒泡

        //跟mouseenter 搭配的 mouseleave 鼠标离开事件,同样不会冒泡


    </script>
</body>
</html>